<div class="row">
  <div class="col-lg-4">
    <div class="card">
      <div class="card-body">
        <div class="iphone-header">
          <%= image_tag("iphone_header.png") %>
        </div>
        <div class="iphone-body">
          <% @spu.spu_details.each do |spu_detail| %>
            <%= image_tag(spu_detail.image.url) %>
          <% end %>
        </div>
        <div class="iphone-iphone_bottom">
          <%= image_tag("iphone_bottom.png") %>
        </div>
      </div>
    </div>
  </div>
  <div class="col-lg-8">
    <div class="card">
      <div class="card-body">
        <h3 class="card-title">商品详情</h3>
        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <label class="form-label">名字</label>
              <div class="form-control-plaintext"><%= @spu.name %></div>
            </div>
          </div>
          <div class="col-md-12">
            <div class="form-group">
              <label class="form-label">描述<small>（此值用于分享到第三方的介绍）</small></label>
              <div class="form-control-plaintext"><%= @spu.description %></div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="form-group">
              <label class="form-label">所属店铺</label>
              <div class="form-control-plaintext"><%= @spu.shop.name %></div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="form-group">
              <label class="form-label">所属分类</label>
              <div class="form-control-plaintext"><%= @spu.shop_category.name %></div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="form-group">
              <label class="form-label">品牌</label>
              <div class="form-control-plaintext"><%= @spu.brand.name if @spu.brand.presence %></div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="form-group">
              <label class="form-label">最少库存</label>
              <div class="form-control-plaintext"><%= @spu.min_stock %></div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="form-group">
              <label class="form-label">最大库存</label>
              <div class="form-control-plaintext"><%= @spu.max_stock %></div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="form-group">
              <label class="form-label">运费模版</label>
              <div class="form-control-plaintext"><%= @spu.fare_template.name %></div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="form-group">
              <label class="form-label">下载二维码</label>
              <div class="form-control-plaintext">
                <div class="dropdown d-none d-md-flex">
                  <a class="nav-link icon" data-toggle="dropdown">
                    <i class="fe fe-download"></i>
                  </a>
                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                    <div id="qrcode" style="padding: 20px;"></div>
                    <script type="text/javascript">
                      new QRCode(document.getElementById("qrcode"), "<%= @spu.id %>");
                    </script>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-12">
            <div class="form-group">
              <label class="form-label">承诺服务</label>
              <div class="form-control-plaintext">
                <% @spu.service_items.each do |service_item| %>
                  <span class="tag tag-blue">
                    <%= service_item.name %>
                  </span>
                <% end %>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>